repeating-linear-gradient

[rpmcmerphy]

Хочу сделать зебру.

 

background: repeating-linear-gradient(to right bottom, #E9E9E9 0 2px, #000000 2px 4px) ;

 

С левого верхнего угла в правый нижний, серый-черный цвет..

 

Не работает что не так ?

[Great Rash]

Вот тут написано, что применять его надо для background-image, т.к. repeating-linear-gradient генерит картинку. Ну и синтаксис там другой, хотя я в этих градиентах не силён, может и без градусов можно.

[wwt]

background-image: -moz-repeating-linear-gradient(to right bottom,  #ccc, #ccc 25px, #000 25px, #000 50px );

Этот пример есть тут -> https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

 

И для Firefox нужен префикс

[SelenIT]

для Firefox нужен префикс

Судя по табличке там внизу, начиная с 16-й версии же уже не нужен?

[wwt]

 

для Firefox нужен префикс

Судя по табличке там внизу, начиная с 16-й версии же уже не нужен?

 

Перепроверил, ты прав ка кобычно.

http://jsfiddle.net/Y7qxz/

Проблема не в префиксе оказалось, а в transparent с ним не хочет работать вообще.

 

А с префиксом другая смешная фигня:

Edited December 6, 2013 by wwt

[SelenIT]

Проблема ... в transparent с ним не хочет работать вообще

Странно, у меня работает...

[wwt]

 

Проблема ... в transparent с ним не хочет работать вообще

Странно, у меня работает...

 

всё пристрелите меня. Я на белом фоне пытался рассмотреть градиент из белого и прозрачного

 

Кстати, а вот с разным направлением повторения с префиксом и нет смешно. видимо в FF осталась старая реализация для префикса и новая без него?

Edited December 6, 2013 by wwt

[SelenIT]

видимо в FF осталась старая реализация для префикса и новая без него?

Не только в FF, с -webkit- (вторая редакция) та же петрушка.

[rpmcmerphy]

Спасибо, но не стал делать через repeating так как мне нужно только до половины div элемента и сделал так :

 

background: linear-gradient(to right bottom, transparent, transparent 1px, grey 2px, transparent 3px, grey 4px, transparent 5px, grey 6px,transparent 7px, grey 8px,transparent 9px, grey 10px,transparent 11px, grey 12px, transparent 0) ;